<template>
  <div class="app-container">
    <div class="box">
      <el-row>
        <el-col :span="12">
          <!--      原料-->
          <el-card class="syl-card">
            <div class="syl-config">
              <div class="config-left" />
              <div class="syl-cation">
                <div class="syl-cation-upper">
                  <div class="syl-upper-left">原料单位</div>
                  <div class="syl-upper-right" v-html="mateMessage" />
                </div>
                <div class="syl-cation-bottom">
                  <el-input v-model="mateName" placeholder="请输入原料名称" @change="getMateName" />
                  <div v-if="mateList.length > 0" class="syl-cation-cong">
                    <div v-for="(item,index) in mateList" :key="index" class="syl-search">
                      <div class="syl-search-left" v-html="item.name" />
                    </div>
                  </div>
                  <div v-else>
                    <h3>暂无数据</h3>
                  </div>
                </div>
              </div>
            </div>
            <div class="syl-submit">
              <el-button type="primary" @click="handleAddMate">新增原料单位</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <!--      烹饪-->
          <el-card class="syl-card">
            <div class="syl-config">
              <div class="config-left" />
              <div class="syl-cation">
                <div class="syl-cation-upper">
                  <div class="syl-upper-left">烹饪方式</div>
                  <div class="syl-upper-right" v-html="kingMessage" />
                </div>
                <div class="syl-cation-bottom">
                  <el-input v-model="kingName" placeholder="请输入烹饪名称" @change="getKingName" />
                  <div v-if="kingList.length>0" class="syl-cation-cong">
                    <div v-for="(item,index) in kingList" :key="index" class="syl-search">
                      <div class="syl-search-left" v-text="item.name" />
                    </div>
                  </div>
                  <div v-else>
                    <h3>暂无数据</h3>
                  </div>
                </div>
              </div>
            </div>
            <div class="syl-submit">
              <el-button type="primary" @click="handleAddKing">新增烹饪方式</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <!--      菜品-->
          <el-card class="syl-card">
            <div class="syl-config">
              <div class="config-left" />
              <div class="syl-cation">
                <div class="syl-cation-upper">
                  <div class="syl-upper-left">菜品分类</div>
                  <div class="syl-upper-right" v-html="dishesMessage" />
                </div>
                <div class="syl-cation-bottom">
                  <el-input v-model="dishesName" placeholder="请输入菜品分类" @change="getDishesName" />
                  <div v-if="dishesList.length>0" class="syl-cation-cong">
                    <div v-for="(item,index) in dishesList" :key="index" class="syl-search">
                      <div class="syl-search-left" v-html="item.name" />
                    </div>
                  </div>
                  <div v-else>
                    <h3>暂无数据</h3>
                  </div>
                </div>
              </div>
            </div>
            <div class="syl-submit">
              <el-button type="primary" @click="handleAddDishes">新增菜品分类</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <!--      套餐-->
          <el-card class="syl-card">
            <div class="syl-config">
              <div class="config-left" />
              <div class="syl-cation">
                <div class="syl-cation-upper">
                  <div class="syl-upper-left">套餐分类</div>
                  <div class="syl-upper-right" v-html="setMessage" />
                </div>
                <div class="syl-cation-bottom">
                  <el-input v-model="setName" placeholder="请输入套餐分类" @change="getSetName" />
                  <div v-if="setMeaList.length>0" class="syl-cation-cong">
                    <div v-for="(item,index) in setMeaList" :key="index" class="syl-search">
                      <div class="syl-search-left" v-html="item.name" />
                    </div>
                  </div>
                  <div v-else>
                    <h3>暂无数据</h3>
                  </div>
                </div>
              </div>
            </div>

            <div class="syl-submit">
              <el-button type="primary" @click="handleAddSet">新增套餐分类</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--    原料添加-->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="原料单位" prop="name">
          <el-input v-model.trim="form.name" placeholder="请输入原料单位" :maxlength="10" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-preventReClick type="primary" :loading="loadingMaterial" @click="submitForm">确 定
        </el-button>
      </div>
    </el-dialog>
    <!--    烹饪添加-->
    <el-dialog
      :title="title"
      :visible.sync="open1"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="form1" :model="form1" :rules="rules1" label-width="100px">
        <el-form-item label="烹饪方式" prop="name">
          <el-input v-model.trim="form1.name" placeholder="请输入烹饪方式" :maxlength="10" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel1">取 消</el-button>
        <el-button v-preventReClick type="primary" :loading="loadingking" @click="submitForm1">确 定</el-button>
      </div>
    </el-dialog>
    <!--    菜品添加-->
    <el-dialog
      :title="title"
      :visible.sync="open2"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="form2" :model="form2" :rules="rules2" label-width="100px">
        <el-form-item label="菜品分类" prop="name">
          <el-input v-model.trim="form2.name" placeholder="请输入菜品分类" :maxlength="10" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel2">取 消</el-button>
        <el-button v-preventReClick type="primary" :loading="loadingDishes" @click="submitForm2">确 定
        </el-button>
      </div>
    </el-dialog>
    <!--    套餐添加-->
    <el-dialog
      :title="title"
      :visible.sync="open3"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="form3" :model="form3" :rules="rules3" label-width="100px">
        <el-form-item label="套餐分类" prop="name">
          <el-input v-model.trim="form3.name" placeholder="请输入套餐分类" :maxlength="10" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel3">取 消</el-button>
        <el-button v-preventReClick type="primary" :loading="disabledSet" @click="submitForm3">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSetMeal,
  addSetMeal,
  getDishes,
  addDishes,
  deleteDishes,
  getCooking,
  addCooking,
  getMate,
  addMate,
  deleteMate
} from '@/api/commodity/classification'

export default {
  name: 'Index',
  data() {
    return {
      // 标题
      title: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 原料数据列表
      mateName: null,
      mateList: [],
      loadingMaterial: false,
      disabledMaterial: false,
      // 弹出层
      open: false,
      open1: false,
      open2: false,
      open3: false,
      // 烹饪数据列表
      kingName: null,
      kingList: [],
      loadingking: false,
      disabledking: false,
      // 菜品数据列表
      dishesName: null,
      dishesList: [],
      loadingDishes: false,
      disabledDishes: false,
      // 套餐数据列表
      setName: null,
      setMeaList: [],
      loadingSet: false,
      disabledSet: false,
      // 表单
      form: {
        name: ''
      },
      form1: {
        name: ''
      },
      form2: {
        name: ''
      },
      form3: {
        name: ''
      },
      // 验证
      rules: {
        name: [
          { required: true, message: '原料单位不能为空', trigger: 'blur' },
          {
            pattern: /[\u4e00-\u9fa5]/,
            message: '原料单位只能为中文',
            trigger: 'blur'
          }
        ]
      },
      rules1: {
        name: [
          { required: true, message: '烹饪方式不能为空', trigger: 'blur' },
          {
            pattern: /[\u4e00-\u9fa5]/,
            message: '烹饪方式只能为中文',
            trigger: 'blur'
          }
        ]
      },
      rules2: {
        name: [
          { required: true, message: '菜品分类不能为空', trigger: 'blur' },
          {
            pattern: /[\u4e00-\u9fa5]/,
            message: '菜品分类只能为中文',
            trigger: 'blur'
          }
        ]
      },
      rules3: {
        name: [
          { required: true, message: '套餐分类不能为空', trigger: 'blur' },
          {
            pattern: /[\u4e00-\u9fa5]/,
            message: '套餐分类只能为中文',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    // 原料
    mateMessage() {
      return this.mateList.length
    },
    // 烹饪
    kingMessage() {
      return this.kingList.length
    },
    // 菜品
    dishesMessage() {
      return this.dishesList.length
    },
    // 套餐
    setMessage() {
      return this.setMeaList.length
    }
  },
  created() {
    this.getList()
    this.getList2()
    this.getList3()
    this.getList4()
  },
  methods: {
    // 表单重置
    reset() {
      this.loadingMaterial = false
      this.disabledMaterial = false
      this.loadingking = false
      this.disabledking = false
      this.loadingDishes = false
      this.disabledDishes = false
      this.loadingSet = false
      this.disabledSet = false
      this.form = {
        name: undefined
      }
      this.form1 = {
        name: undefined
      }
      this.form2 = {
        name: undefined
      }
      this.form3 = {
        name: undefined
      }
      this.resetForm('form')
      this.resetForm('form1')
      this.resetForm('form2')
      this.resetForm('form3')
    },
    /** 套餐列表 **/
    getList() {
      getSetMeal(this.queryParams).then(res => {
        this.setMeaList = res.data
      })
    },
    /** 菜品列表 **/
    getList2() {
      getDishes(this.queryParams).then(res => {
        this.dishesList = res.data
      })
    },
    /** 烹饪列表 **/
    getList3() {
      getCooking(this.queryParams).then(res => {
        this.kingList = res.data
      })
    },
    /** 原料列表 **/
    getList4() {
      getMate(this.queryParams).then(res => {
        this.mateList = res.data
      })
    },
    /** 原料搜索 **/
    getMateName(row) {
      const name = []
      let value = {}
      if (row !== '') {
        value = this.mateList.find(item => item.name === row)
        if (value !== undefined) {
          name.push(value)
          this.mateList = name
        }
      } else {
        this.getList4()
      }
    },
    /** 原料删除 **/
    handleMateDelete(value) {
      deleteMate(value).then(res => {
        if (!res.code) {
          this.msgSuccess('删除成功')
          this.getList4()
        }
      })
    },
    /** 原料取消 **/
    cancel() {
      this.open = false
      this.reset()
    },
    /** 原料提交 **/
    submitForm: function() {
      const mateList = this.mateList
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loadingMaterial = true
          const { name } = this.form
          const checkArrayRepeat = mateList.map((item) => item.name)
          const index = checkArrayRepeat.indexOf(name)
          if (index !== -1) {
            return this.msgInfo('不可重复添加原料')
          }
          addMate(this.form).then(res => {
            if (!res.code) {
              this.msgSuccess('添加成功')
              this.open = false
              this.loadingMaterial = false
              this.getList4()
            }
          })
        }
      })
      setTimeout(() => {
        this.loadingMaterial = false
      }, 3000)
    },
    /** 原料弹出框 **/
    handleAddMate() {
      this.title = '新增原料分类'
      this.open = true
      this.reset()
    },
    /** 烹饪搜索 **/
    getKingName(row) {
      const name = []
      let value = null
      if (row !== '') {
        value = this.kingList.find(item => item.name === row)
        if (value !== undefined) {
          name.push(value)
          this.kingList = name
        }
      } else {
        this.getList3()
      }
    },
    /** 烹饪弹出框 **/
    handleAddKing() {
      this.open1 = true
      this.title = '新增烹饪方式'
      this.reset()
    },
    /** 烹饪取消 **/
    cancel1() {
      this.open1 = false
      this.reset()
    },
    /** 烹饪提交 **/
    submitForm1: function() {
      const kingList = this.kingList
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          this.loadingking = true
          const { name } = this.form1
          const checkArrayRepeat = kingList.map((item) => item.name)
          const index = checkArrayRepeat.indexOf(name)
          if (index !== -1) {
            return this.msgInfo('不可重复添加原料')
          }
          addCooking(this.form1).then(res => {
            if (!res.code) {
              this.msgSuccess('添加成功')
              this.open1 = false
              this.loadingking = false
              this.getList3()
            }
          })
        }
      })
    },
    /** 菜品搜索 **/
    getDishesName(row) {
      const name = []
      let value = null
      if (row !== '') {
        value = this.dishesList.find(item => item.name === row)
        if (value !== undefined) {
          name.push(value)
          this.dishesList = name
        }
      } else {
        this.getList2()
      }
    },
    /** 菜品删除 **/
    handleDishesDelete(value) {
      deleteDishes(value).then(res => {
        if (!res.code) {
          this.msgSuccess('删除成功')
          this.getList2()
        }
      })
    },
    /** 菜品弹出框 **/
    handleAddDishes() {
      this.open2 = true
      this.title = '新增菜品分类'
      this.reset()
    },
    /** 菜品取消 **/
    cancel2() {
      this.open2 = false
      this.reset()
    },
    /** 菜品提交 **/
    submitForm2: function() {
      const dishesList = this.dishesList
      this.$refs['form2'].validate((valid) => {
        if (valid) {
          this.loadingDishes = true
          const { name } = this.form2
          const checkArrayRepeat = dishesList.map((item) => item.name)
          const index = checkArrayRepeat.indexOf(name)
          if (index !== -1) {
            return this.msgInfo('不可重复添加原料')
          }
          addDishes(this.form2).then(res => {
            if (!res.code) {
              this.msgSuccess('添加成功')
              this.open2 = false
              this.loadingDishes = false
              this.getList2()
            }
          })
        }
      })
    },
    /** 套餐搜索 **/
    getSetName(row) {
      const name = []
      let value = null
      if (row !== '') {
        value = this.setMeaList.find(item => item.name === row)
        if (value !== undefined && value !== null) {
          name.push(value)
          this.setMeaList = name
        } else {
          this.setMeaList = []
        }
      } else {
        this.getList()
      }
    },
    /** 套餐弹出框 **/
    handleAddSet() {
      this.open3 = true
      this.title = '新增套餐分类'
      this.reset()
    },
    /** 套餐取消 **/
    cancel3() {
      this.open3 = false
      this.reset()
    },
    /** 套餐提交 **/
    submitForm3: function() {
      const setMeaList = this.setMeaList
      this.$refs['form3'].validate((valid) => {
        if (valid) {
          this.disabledSet = true
          const { name } = this.form3
          const checkArrayRepeat = setMeaList.map((item) => item.name)
          const index = checkArrayRepeat.indexOf(name)
          if (index !== -1) {
            return this.msgInfo('不可重复添加原料')
          }
          addSetMeal(this.form3).then(res => {
            if (!res.code) {
              this.msgSuccess('添加成功')
              this.open3 = false
              this.disabledSet = false
              this.getList()
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  justify-content: center;
  background-color: #FFFFFF;
  padding: 20px 0;
}

.syl-card {
  margin: 10px 15px;
}

.syl-config {
  height: 324px;
  margin: auto;
  display: flex;
  justify-content: space-around;

  .config-left {
    width: 269px;
    height: 324px;
    margin: 0 23px;
    flex-shrink: 0;
    background: #FFFFFF;
    box-shadow: 0 4px 12px 6px #ECECEC;
    border-radius: 12px;
  }

  .syl-cation {
    width: 269px;
    height: 324px;
    flex-shrink: 1;
    border-radius: 12px;
    margin: 0 23px;
    box-shadow: 0 4px 12px 6px #ECECEC;

    .syl-cation-upper {
      width: 100%;
      height: 44px;
      background-color: #EEEEEE;
      padding: 0 20px;
      line-height: 44px;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      display: flex;

      .syl-upper-left {
        width: 100%;
        height: 50px;
        text-align: left;
      }

      .syl-upper-right {
        width: 100%;
        height: 50px;
        text-align: right;
      }
    }

    .syl-cation-bottom {
      width: 100%;
      padding: 10px 20px;

      .syl-cation-cong {
        width: 100%;
        height: 190px;
        overflow: auto;
        margin: 10px 5px;

        &::-webkit-scrollbar {
          width: 5px;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 19px;
          background: rgba(153, 153, 153, 0.44);
        }

        &::-webkit-scrollbar-track {
          border-radius: 0;
          background: transparent;
        }
      }

      .syl-search {
        width: 100%;
        height: 40px;
        display: flex;
        line-height: 40px;

        .syl-search-left {
          width: 100%;
          height: 30px;
          line-height: 30px;
          text-align: left;
          color: #666666;
          font-size: 14px;
          font-weight: 400;
          border-bottom: 1px solid #EEEEEE;
        }

        .syl-search-right {
          width: 100%;
          height: 30px;
          text-align: right;
          color: red;
          cursor: pointer;
        }
      }
    }
  }
}

.syl-submit {
  width: 84%;
  height: 40px;
  text-align: right;
  line-height: 40px;
  margin-top: 20px;
}

</style>
